import React, { useEffect, useState } from 'react'
// 日期
import '../../assets/style/user.css'
import {
    Button,
    DatePicker,
    Input,
    Table,
    Breadcrumb,
    Form,
    TreeSelect,
    Space,
    Tag,
    Dropdown,
    Col,
    Radio,
    Drawer,
    Row,
    Select,
} from 'antd';

import {
    UpOutlined,
    DownOutlined,
    EyeOutlined,
    PlusOutlined
} from '@ant-design/icons';
import { getUserApi } from '../../apis/users'
const { RangePicker } = DatePicker;

const columns = [
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
        sorter: (a, b) => a.username - b.username,
        render: (text) => <a>{text}</a>,
    },
    {
        title: '性别',
        dataIndex: 'ssex',
        key: 'ssex',
        filters: [
            {
                text: '男',
                value: '0',
            },
            {
                text: '女',
                value: '1',
            },
            {
                text: '保密',
                value: '2',
            },
        ],
        onFilter: (value, record) => record.ssex.indexOf(value) === 0,
        render: (ssex) => {
            if (ssex == 0) {
                ssex = '男'
            } else if (ssex == 1) {
                ssex = '女'
            } else if (ssex == 2) {
                ssex = '保密'
            }
            return ssex;
        }
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email'
    },
    {
        title: '部门',
        dataIndex: 'deptName',
        key: 'deptName'

    },
    {
        title: '电话',
        dataIndex: 'mobile',
        key: 'mobile'
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        filters: [
            {
                text: '有效',
                value: '0',
            },
            {
                text: '锁定',
                value: '1',
            },
        ],
        onFilter: (value, record) => record.status.indexOf(value) === 0,
        render: (status) => {
            let color = 'green';
            if (status == 0) {
                color = 'volcano'
                status = '锁定'
            } else if (status == 1) {
                status = '有效'
            }
            return (
                <Tag color={color} key={status}>
                    {status}
                </Tag>
            )
        },

    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        sorter: (a, b) => a.createTime - b.createTime,
    },
    {
        title: '操作',
        render: (_, record) => (
            <Space size="middle">
                <a></a>
                <a><EyeOutlined /></a>
            </Space>
        ),
    },
];



export default function user() {
    //排序
    const [filteredInfo, setFilteredInfo] = useState({});
    const [sortedInfo, setSortedInfo] = useState({});
    const handleChange = (pagination, filters, sorter) => {
        console.log("Various parameters", pagination, filters, sorter);
        setFilteredInfo(filters);
        setSortedInfo(sorter);
    };
    // 获取用户数据
    const [data, setData] = useState();
    const [total, setTotal] = useState();
    useEffect(() => {
        getUser();
    }, [])
    async function getUser(params) {
        const res = await getUserApi(params);
        console.log('res', res);
        setData(res.rows)
        setTotal(res.total)
    }
    // table//分页
    const onChange = (pageNum) => {
        console.log('params', pageNum);
        getUser({ pageNum })
    };
    // 搜索
    const [searchForm] = Form.useForm();
    const onReset = () => {
        console.log('11111');
        // 重置表单
        searchForm.resetFields();
    }
    // 全选
    const [selectionType] = useState("checkbox");
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows
            );
        },
    }
    // 更多操作
    const handleMenuClick = (e) => {
        message.info('Click on menu item.');
        console.log('click', e);
    };
    const items = [
        {
            label: '密码重置',
            key: '1',
        },
        {
            label: '导出Excel',
            key: '2',
        },
    ];
    const menuProps = {
        items,
        onClick: handleMenuClick,
    };

    // 新增数据 
    const [open, setOpen] = useState(false);
    //点击打开新增页面
    function add() {
        setOpen(true)
    }
    // 点击添加数据
    function addClose() {
        // 发送接口

        //保存数据并关闭新增页面
        setOpen(false);

    }
    // 点击取消和叉叉关闭新增页面
    const onClose = () => {
        setOpen(false);
    };

    const [value, setValue] = useState(1);
    const onChangeDr = (e) => {
        console.log("radio checked", e.target.value);
        setValue(e.target.value);
    };
    //表单数据
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (

        <div style={{ width: '100vw' }}>

            <div style={{ marginBottom: '.8rem' }}>
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">系统管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">用户管理</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>

            <div style={{ marginTop: '.8rem' }}>
                {/* 搜索 */}
                <div style={{ width: '95%', margin: '0 auto', marginTop: '8px' }}>
                    <Form
                        style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}
                        layout="horizontal"
                        form={searchForm}
                    >
                        <Form.Item label="用户名" style={{ width: '48%' }}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="部门" style={{ width: '48%' }}>
                            <TreeSelect
                                treeData={[
                                    {
                                        title: '开发部',
                                        value: '开发部',
                                        children: [
                                            {
                                                title: '开发一部',
                                                value: '开发一部',
                                            },
                                            {
                                                title: '开发二部',
                                                value: '开发二部',
                                            },
                                        ],
                                    },
                                    {
                                        title: '市场部',
                                        value: '市场部',
                                    },
                                    {
                                        title: '人事部',
                                        value: '人事部',
                                    },
                                    {
                                        title: '测试部',
                                        value: '测试部',
                                    },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="创建时间" style={{ width: '48%' }}>
                            <RangePicker style={{ width: '100%' }} />
                        </Form.Item>
                        <Form.Item style={{ height: '30px', lineHeight: '30px' }}>
                            <Button type="primary">查询</Button>
                            <Button style={{ marginLeft: '10px', marginRight: '10px' }} htmlType="button" onClick={onReset}>重置</Button>
                            <a>收起 <UpOutlined /></a>
                        </Form.Item>
                    </Form>
                </div>

                <div >
                    <div style={{
                        marginBottom: '17px', width: '25%'
                        , display: 'flex', justifyContent: 'space-between', alignItems: 'center'
                    }}>
                        <Button type="primary" ghost onClick={add}>新增</Button>
                        <Button size='small ' >删除</Button>

                        <Dropdown menu={menuProps}>
                            <Button size='small '>
                                <Space>
                                    更多操作
                                    <DownOutlined />
                                </Space>
                            </Button>
                        </Dropdown>
                    </div>
                    <Table
                        rowKey="username"
                        rowSelection={{
                            type: selectionType,
                            ...rowSelection,
                        }}
                        // 表头
                        columns={columns}
                        // 数据
                        dataSource={data}
                        onChange={handleChange}
                        // 配置分页
                        pagination={{
                            total,
                            // 点击跳转
                            onChange
                        }}
                    />
                </div>
            </div>

            {/*新增 */}
            <>
                <Drawer
                    title="新增用户"
                    width={580}
                    onClose={onClose}
                    open={open}
                    bodyStyle={{
                        paddingBottom: 80,
                    }}
                    extra={
                        <Space>
                            <Button onClick={onClose}>取消</Button>
                            <Button onClick={addClose} type="primary" >
                                添加
                            </Button>
                        </Space>
                    }
                >
                    <Form layout="vertical"
                        hideRequiredMark
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item
                                    name="username"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入用户名！",
                                        },
                                    ]}
                                >
                                    <label style={{ width: '20%' }}>用户名：</label>
                                    <Input style={{ width: '80%' }} />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item
                                    name="password"
                                >
                                    <label style={{ width: '20%' }}>密码：</label>
                                    <Input.Password style={{ width: '80%' }} value='1234qwer' disabled title='默认初始密码1234qwer' />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item
                                    name="email"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入邮箱！",
                                        },
                                    ]}
                                >
                                    <label style={{ width: '20%' }}>邮箱：</label>
                                    <Input style={{ width: '80%' }} />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item
                                    name="mobile"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入手机！",
                                        },
                                    ]}
                                >
                                    <label style={{ width: '20%' }}>手机号：</label>
                                    <Input style={{ width: '80%' }} />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item
                                    name="roleName"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <label style={{ width: '20%' }}>角色：</label>
                                    <Select
                                        style={{ width: '80%' }}
                                        placeholder="请选择角色！"
                                    >
                                        <Option value="管理员">管理员</Option>
                                        <Option value="注册用户">注册用户</Option>
                                        <Option value="普通用户">普通用户</Option>
                                        <Option value="商户">商户</Option>
                                        <Option value="VIP会员">VIP会员</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item>
                                    <label style={{ width: '20%' }}>部门：</label>
                                    <TreeSelect
                                        style={{ width: '80%' }}
                                        treeData={[
                                            {
                                                title: '开发部',
                                                value: '开发部',
                                                children: [
                                                    {
                                                        title: '开发一部',
                                                        value: '开发一部',
                                                    },
                                                    {
                                                        title: '开发二部',
                                                        value: '开发二部',
                                                    },
                                                ],
                                            },
                                            {
                                                title: '市场部',
                                                value: '市场部',
                                            },
                                            {
                                                title: '人事部',
                                                value: '人事部',
                                            },
                                            {
                                                title: '测试部',
                                                value: '测试部',
                                            },
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item
                                    name="status"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入用户名！",
                                        },
                                    ]}
                                >
                                    <label style={{ width: '20%' }}>状态：</label>
                                    <Radio.Group style={{ width: '80%' }}>
                                        <Radio value="1">锁定</Radio>
                                        <Radio value="0">有效</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row style={{ width: '75%', margin: '0 auto' }}>
                            <Col style={{ width: '100%' }}>
                                <Form.Item
                                    name="ssex"
                                    rules={[
                                        {
                                            required: true,
                                            message: "请输入用户名！",
                                        },
                                    ]}
                                >
                                    <label style={{ width: '20%' }}>性别：</label>
                                    <Radio.Group style={{ width: '80%' }}>
                                        <Radio value="2">男</Radio>
                                        <Radio value="1">女</Radio>
                                        <Radio value="0">保密</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Drawer>
            </>

        </div>

    )
}
